<template>

  <div class="shopsDetail">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/threads' }">线索列表</el-breadcrumb-item>

        <el-breadcrumb-item v-if="vm.isEdit">查看线索 #{{id}}</el-breadcrumb-item>
        <el-breadcrumb-item v-else>线索获取错误</el-breadcrumb-item>

      </el-breadcrumb>

    </el-row>
    <div class="content">



			<h2>{{form.name}}</h2>
		  <h3>{{form.phone}}</h3>
      <p>线索生成: {{form.create_time}}</p>
     <p>返回次数: {{form.give_back_times}}</p>
      <p><span>店铺名称</span> {{form.shop_name}}</p>
      <p><span>意向车型</span> {{form.model_name}}</p>
      <p><span>客户需求</span> {{form.demand}}</p>
      <el-button type="success" :loading="vm.assigning" @click="dialogVisible = true">指派店铺</el-button>
      <el-button type="danger" :loading="vm.closing" @click="close">关闭线索</el-button>
      <el-dialog :visible.sync="dialogVisible">

        <mt-dialog :items="shops" name="shop_name" @change="changShop"></mt-dialog>

        <div slot="footer" class="dialog-footer">


          <el-button size="small"  @click="assign" type="success">指派</el-button>

          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>





    </div>
    <div class="mt-cell" style="border-radius: 10px">
      <h2>跟进记录</h2>
        <div class="commit" v-for="item in follow_up_records">
            <div class="user-name">{{item.name}} <el-tag size="mini" type="success">{{item.intention_level}}</el-tag> </div>
            <div class="user-message">{{item.message}}</div>
        </div>
    </div>

  </div>
</template>
<style scoped>
  .mt-cell .commit{
    margin-top: 30px;
  }
  .mt-cell .commit .user-message{
    padding: 10px;
    background: #fff;
    margin: 20px 0;
  }
</style>
<script>
import * as Threads from "@/api/threads";
import * as Shops from "@/api/shops";
import mtDialog from '@/components/DialogPicker'

export default {
  computed: {},

  components: {
    mtDialog
  },
  data() {
    return {
      vm: {
        isEdit: false,
        message: "",
      },
      sid:-1,
      form: {},
      follow_up_records:{},
      shops:[],
      dialogVisible:false
    };
  },

  mounted() {
    var that=this;
    if (this.$route.params.id > 0) {
      this.vm.isEdit = true;
      this.id = this.$route.params.id;
    }
    

    this.query();

    Shops.query().then(function(res){
      that.shops=res.pass_list;
    })

  },

  methods: {
    changShop:function(e){
      this.sid=e;
    },
    query(){
      var that =this;
      Threads.get({id:that.id}).then(function(res){
        that.form=res.thread_info;
        that.follow_up_records=res.follow_up_records
      })
    },
    assign:function(){
      var that=this;
      var _q={};
      _q.target_shop_id=that.sid;

      _q.thread_ids=[that.id];


      Threads.assign(_q).then(function(res){
        that.dialogVisible=false;
        that.$message({
          message: '指派成功,刷新页面中',
          type: 'success'
        });

        that.query()
      }).catch(function(message){
        that.$message({
          message: message,
          type: 'warning'
        });
      })

    },
    close() {
    
        this.$confirm('此操作将关闭线索, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var _q={};
          _q.thread_ids=[this.id];
          Threads.close(_q).then((res)=> {
            console.log(res);

            this.$router.go(-1)

          })

        })
      
      ;
    },
    add() {
      var that = this;
      Threads.add(that.form).then(function(res) {
        console.log(res);
      });
    },
    update() {
      var that = this;
      Threads.update(that.form).then(function(res) {
        console.log(res);
      });
    },


  }
};
</script>
